<template>
  <section
    ref="dialogWrap"
    v-if="isShow"
    class="dialog-wrap"
  >
    <div @click.stop="back" class="close"><i></i><i></i></div>

    <section class="full-page bg-default">
      <div class="video-wrap full-page bg-black" id="videoPlayer_100">
        <cube-slide
          :threshold="0.1"
          :showDots="false"
          :autoPlay="false"
          :direction="'vertical'"
          :loop="false"
          :style="{ width: '100vw' }"
          ref="slide"
          :data="list"
          @change="changePage"
        >
          <cube-slide-item
            :style="{ width: '100vw' }"
            v-for="(item, idx) in list"
            :key="'item100' + idx"
          >
            <videoItem
              :ref="'videoSlideItem_' + idx"
              :key="'item100' + idx"
              @onplay="onplay"
              @ended="ended"
              @focus="focus"
              :focusTime="focusTime"
              :currentVideoIndex="currentVideoIndex"
              :data="item"
              :index="idx"
              videoPlayerIndex="100"
              currentVideoPlayerIndex="-1"
              :isDormancy="isDormancy"
            ></videoItem>
          </cube-slide-item>
          <noData v-if="list.length === 0"></noData>
        </cube-slide>
      </div>
    </section>
    <readScore
      ref="scoreInstance"
      :_contentId="currentContentId"
      :type="2"
    ></readScore>
  </section>
</template>

<script>
import videoItem from "@/components/dangjian/home/video/videoItem.vue";
import likeUpsComponent from "./likeUpsComponent";
import $ from "../../../static/js/jquery-1.12.4.min";
import _ from "lodash";
export default {
  name: "videoSlidePlayer",
  components: { likeUpsComponent, videoItem },
  data() {
    return {
      fromType: null, // 从哪里进来该页面（党工委dgw或搜索ss、活动huodong、作品zp、喜欢xh）
      isFullScreen: false,
      list: [], //视频数据列表
      currentContentId: "",
      currentVideoIndex: 0,
      pageIndex: 1,
      pageSize: 6,
      focusTime: 30,
      detail: {},
      isShow: !true,
      isDormancy: false, //是否休眠，目前只有playerOne.vue用到
      isEnd: false, //判断是否到底没有数据了
      total: 0,//当前分类的视频总数
    };
  },
  watch: {
    $route(to, from) { //原来
      this.back();
    },
  },
  created() {
    console.log("videoSlidePlayer created");
  },
  mounted() {
  },
  beforeDestroy() {
    this.tools.dialogDestroy(); //原来
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.scoreInstance.stopRead();
    console.log("beforeRouteLeave");
    if (window.douyinCommentInstance) {
      window.douyinCommentInstance.back();
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    next();
  },
  methods: {
    show() {
      this.tools.dialog(1, this);
      this.isShow = true;
      this.$nextTick(() => {
        this.$store.state.isVideo = true;
        this.tools.stopAudio();

        console.log('this.$store.state.currentRegionalData',this.$store.state.currentRegionalData)
        this.fromType = this.$store.state.currentRegionalData.fromType;
        this.pageIndex= this.$store.state.currentRegionalData.pageIndex;
        this.list= this.$store.state.currentRegionalData.list;
        this.currentVideoIndex = this.$store.state.currentRegionalData.index;

        // 跳转到对应视频
        this.viewVideo(this.currentVideoIndex);

        
        if (this.list.length >= this.pageSize) {
          this.isEnd = false; //初始化时，未到底
        }else{
          this.isEnd = true; //初始化时，到底了，不一定最后一条
          if (this.list.length == 1) { //只有一条
            this.tools.tip('最后一条视频')
          }
        }

        // window.audioPlayer.pause();
        if (this.list.length - this.currentVideoIndex < 3 && !this.isEnd) {
          this.fetchList(this.fromType);
        }
      });
    },
    back() {
      this.tools.playAudio();
      this.tools.dialog(-1);
      this.isShow = false;
      this.$store.state.currentRegionalData = null;
      this.list = [];
    },
    // 请求列表数据
    fetchList(type) {
      if (type === 'dgw' || type === 'ss') { //从“党工委”或“搜索”进来
        this.getPageDgw();
      }else if (type === 'hd') { //从“活动”进来
        this.getPageHd();
      }else if (type === 'zp') { //从“作品”进来
        this.getPageZp();
      }else if (type === 'xh') { //从“喜欢”进来
        this.getPageXh();
      }
    },
    //请求列表数据-从播客首页党工委进来
    getPageDgw() {
      this.isEnd = false;
      let data = {
        channelId: "19a64c36d6ff4442948bb99bb1a06e77",
        areaCode: this.fromType=='dgw' ? this.$store.state.currentRegionalData.regionalInfo.code : '',
        title: this.fromType=='ss' ? this.$store.state.currentRegionalData.keyword : '',
        pageNo: this.pageIndex + "",
        pageSize: this.pageSize,
      };
      return this.fetchService.contentPage(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.alert(
            res.message || res.resp_msg || "接口出错，请联系管理员"
          );
        }
        this.total= res.data.total
        if (this.pageIndex === 1) {
          this.detail = res.data.page[0];
        }
        if (res.data.page.length<this.pageSize) {
          this.isEnd = true; //到底了,不要再请求
        }
        this.list = this.list.concat(res.data.page);
        this.pageIndex++;

        // 跳转到对应视频
        this.viewVideo(this.currentVideoIndex);
      });
    },
    //请求列表数据-从播客首页活动进来
    getPageHd() {
      this.isEnd = false;
      let data = {
        activityId: this.$store.state.currentRegionalData.menuId || '',
        pageNo: this.pageIndex + "",
        pageSize: this.pageSize,
      };
      return this.fetchService.play_getContentByActivity(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.alert(
            res.message || res.resp_msg || "接口出错，请联系管理员"
          );
        }
        this.total= res.data.total
        if (this.pageIndex === 1) {
          this.detail = res.data[0];
        }
        if (res.data.length<this.pageSize) {
          this.isEnd = true; //到底了,不要再请求
        }
        this.list = this.list.concat(res.data);
        this.pageIndex++;

        // 跳转到对应视频
        this.viewVideo(this.currentVideoIndex);
      });
    },
    //请求列表数据-从播客空间作品进来
    getPageZp() {
      this.isEnd = false;
      let data = {
        checkStatus: this.$store.state.currentRegionalData.zpCheckStatus || 1,
        pageNo: this.pageIndex + "",
        pageSize: 18,
        userId: this.$store.state.currentRegionalData.userId || '',
      };
      return this.fetchService.smallVideoOwn(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.alert(
            res.message || res.resp_msg || "接口出错，请联系管理员"
          );
        }
        this.total= res.data.total
        if (this.pageIndex === 1) {
          this.detail = res.data[0];
        }
        if (res.data.length<this.pageSize) {
          this.isEnd = true; //到底了,不要再请求
        }
        this.list = this.list.concat(res.data);
        this.pageIndex++;

        // 跳转到对应视频
        this.viewVideo(this.currentVideoIndex);
      });
    },
    //请求列表数据-从播客空间喜欢进来
    getPageXh() {
      this.isEnd = false;
      let data = {
        pageNo: this.pageIndex + "",
        pageSize: 18,
        userId: this.$store.state.currentRegionalData.userId || '',
      };
      return this.fetchService.smallVideoMyDianZan(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.alert(
            res.message || res.resp_msg || "接口出错，请联系管理员"
          );
        }
        this.total= res.data.total
        if (this.pageIndex === 1) {
          this.detail = res.data[0];
        }
        if (res.data.length<this.pageSize) {
          this.isEnd = true; //到底了,不要再请求
        }
        this.list = this.list.concat(res.data);
        this.pageIndex++;

        // 跳转到对应视频
        this.viewVideo(this.currentVideoIndex);
      });
    },
    // 跳转到对应视频
    viewVideo(index) {
      setTimeout(() => {
        if (this.$refs.slide) {
          this.$refs.slide.slide.goToPage(0, index, 1);
        }
      }, 0);
    },
    focus() {
      this.focusTime = Date.now();
    },
    play(e) {
      e.target.play();
    },
    // 播放时
    onplay(e) {
      this.addScore(this.currentVideoIndex);
    },
    /*视频播放结束时触发*/
    ended() {
      this.$refs.scoreInstance.getScore("watch");
    },
    /*添加积分*/
    addScore(index) {
      let len = this.list.length;
      if (index >= len) {
        index = len - 1;
      }
      let content = this.list[index];
      console.log("video content", content);
      this.currentContentId = content.id;
      this.$nextTick(() => {
        this.$refs.scoreInstance.startRead();
      });
    },
    // 翻页
    changePage(currIndex) {
      console.log('this.isEnd',this.isEnd)
      console.log('this.isEnd',this.list.length - currIndex)
      if (this.list.length - currIndex < 3 && !this.isEnd) {
        this.fetchList(this.fromType);
      }
      this.currentVideoIndex = currIndex;
      console.log("当前轮播图序号为:" + currIndex);
      this.playVideo(currIndex);
      if (this.list.length == currIndex + 1 && this.isEnd) {
        this.tools.tip('最后一条视频');
      }
    },
    // 播放视频
    playVideo(index) {
      let videos = document.querySelectorAll("video");
      if (videos.length < 1) {
        return false;
      }
      for (let i = 0; i < this.list.length; i++) {
        // videoItem.vue组件，beforeDestroy已销毁player
        // let _vueNode = this.$refs['videoItem_'+this.selfIndex +'_'+i];
        // if (_vueNode) _vueNode[0].pause();
      }
      if (index >= this.list.length) {
        this.$store.state.newsDetail = this.detail = this.list[index - 1];
        index = videos.length - 1;
      }
      let _vueNode = this.$refs['videoSlideItem_'+index];
      if (_vueNode) _vueNode[0].play();
    },
  },
};
</script>

<style scoped lang="scss">

@import "@/common/stylus/moon.scss";
*::-webkit-media-controls-start-playback-button {
  display: block;
  -webkit-appearance: block;
}
*::-webkit-media-controls-panel {
  display: block;
  -webkit-appearance: block;
}

*::--webkit-media-controls-play-button {
  display: block;
  -webkit-appearance: block;
}
.video {
  video {
    /*opacity: 0;*/
  }
  .poster {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    overflow: hidden;
    background-color: $theme-color;
    img {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: auto;
    }
  }
  .self {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    .left-bar {
      position: absolute;
    }
  }
}
.full-page {
  padding: 0;
  height: 100vh;
  .head-wrap,
  .top-menu,
  .btn-menu {
    display: none;
  }
  .cube-slide-group,
  .cube-slide-item,
  .video {
    height: 100vh !important;
  }
}
.video-wrap .video .video-title {
  width: 70%;
}







.dialog-wrap {
  position: fixed;
  z-index: 95;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: #000;
  .single-video,
  .video {
    @include fullImg();
    overflow: hidden;
    position: relative;
    video {
      width: 100%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .video-wrap,
  .video {
    @include fullImg();
    video {
      z-index: auto !important; //为了暂停键
    }
  }
}
.close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 89;
  width: pxToRem(30px);
  height: pxToRem(30px);
  transform: rotate(45deg);
  i {
    background: #999;
    position: absolute;
  }
  i:first-child {
    top: 50%;
    left: 0;
    margin-top: -1px;
    width: pxToRem(30px);
    height: 2px;
  }
  i:last-child {
    top: 0;
    left: 50%;
    margin-left: -1px;
    height: pxToRem(30px);
    width: 2px;
  }
}
.like-ups-btns {
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 89;
  transform: translateY(-50%);
}
</style>
